<template>
    <div class="daughter">
        <div style="margin: 10px; font-size: 20px;">我是daughter组件</div>
        <div @click="age++" style="margin: 10px;">年龄: {{ age }}</div>
        <div>弟弟给的零食: {{ food }}</div>
    </div>
</template>

<script setup>
import { ref, inject } from 'vue'
const age = inject('age')
const emitter = inject('emitter')
const food = ref('')
emitter.on('give', f => {
    console.log(f.value)
    food.value = f.value
})
</script>

<style lang="scss" scoped>
.daughter {
    height: 150px;
    width: 600px;
    border: 3px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>